<template>
  <div>
    <div class="pageTop">
      <div
        class="pageTop__botton"
        @click="clickTop(1)"
        :style="{'backgroundColor': clickType ? '#2E99F3' : '#EAF5FE', 'color':clickType ? 'white' : '#2E99F3' }"
      >通用设置</div>
      <div
        class="pageTop__botton"
        @click="clickTop(0)"
        :style="{'backgroundColor': !clickType ? '#2E99F3' : '#EAF5FE', 'color':!clickType ? 'white' : '#2E99F3' }"
      >基金详情</div>
    </div>
    <setCommodity v-if="clickType"></setCommodity>
    <detCommodity v-if="!clickType"></detCommodity>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import setCommodity from "./common/setCommodity.vue";
import detCommodity from "./common/detCommodity.vue";

@Component({
  components: {
    setCommodity,
    detCommodity,
  },
})
export default class ManageIndex extends Vue {
  name = "goodCommodity";

  clickType = true;

  mounted() {
    this.init();
  }

  /**
   * 初始化信息
   */
  init() {
    console.log("init");
  }

  /**
   * 顶部点击事件
   */
  clickTop(type) {
    this.clickType = Boolean(type);
  }
}
</script>

<style lang="scss" scoped>
@include b(pageTop) {
  display: flex;
  padding-bottom: 20px;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;

  @include e(botton) {
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: bold;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>
